<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 1000px;height: 300px;margin: 50px auto;position: relative;
        overflow: hidden}
        .imgbox{position: absolute;left:0;top:0;}
        .imgbox img{width: 1000px;height: 300px;float: left;}
        .btns input{position: absolute;width: 40px;height: 40px;top: 130px;}
        #left{left:0}
        #right{right:0}
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox">
            <img src="./imgs/banner1.jpg" alt="">
            <img src="./imgs/banner2.jpg" alt="">
            <img src="./imgs/banner3.jpg" alt="">
            <img src="./imgs/banner4.jpg" alt="">
            <img src="./imgs/banner5.jpg" alt="">
            <img src="./imgs/banner6.jpg" alt="">
            <img src="./imgs/banner7.jpg" alt="">
            <!-- 无缝轮播1：复制第一张图，放在最后，用来做过渡 -->
            <img src="./imgs/banner1.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" id="left" value="<">
            <input type="button" id="right" value=">">
        </div>
    </div>
</body>
<script src="./move.js"></script>
<script>
    function Banner(){
        // 1. 选择元素
        this.left = document.getElementById("left");
        this.right = document.getElementById("right");
        this.imgbox = document.querySelector(".imgbox");
        this.items = this.imgbox.children;

        // 默认索引
        this.index = 0;

        // 动态计算imgbox的宽度 = 图片的个数 * 任一图片的宽度
        this.imgbox.style.width = this.items.length * this.items[0].offsetWidth + "px";

        // 2. 执行绑定事件
        this.addEvent();
    }
    Banner.prototype.addEvent = function(){
        const that = this;
        // 实现绑定事件
        this.left.onclick = function(){
            that.changeIndexLeft();
        }
        this.right.onclick = function(){
            // 3. 执行计算索引
            that.changeIndexRight();
        }
    }
    Banner.prototype.changeIndexLeft = function(){
        if(this.index === 0){
            this.index = this.items.length-2;
            this.imgbox.style.left = -(this.items.length-1) * this.items[0].offsetWidth + "px";
        }else{
            this.index--;
        }
        this.changeItem()
    }
    Banner.prototype.changeIndexRight = function(){
        // 实现索引的计算
        if(this.index === this.items.length-1){
            // 无缝轮播图2：因为第一张图和最后一张图一样，所以点击之后真正要显示的是第二张图
            this.index = 1;
            // 无缝轮播图3：同一瞬间，将imgbox的位置，初始化
            this.imgbox.style.left = 0;
        }else{
            this.index++;
        }
        // 4. 执行切换图片功能
        this.changeItem()
    }
    Banner.prototype.changeItem = function(){
        // 实现图片的切换
        // console.log(this.index)
        // this.imgbox.style.left = -this.index * this.items[0].offsetWidth + "px";
        
        // 利用move函数，切换图片
        move(this.imgbox, {
            left: -this.index * this.items[0].offsetWidth
        })
    }

    new Banner();
</script>
</html>